<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="all">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<script>
	function bindChangeSelectValue(idSelectBox){
		$('#'+idSelectBox).change(function(){	
			var selected_val = $(this).val();
			console.log("selected values : "+selected_val);
			
			//simulation de la communication ajax
			var res = "2,3,4;2,4;;4";
			
			updateSelectInput(res);
			
		});
	}
	
	function updateSelectInput(res){
		//parser les infos pour filtrer le contenu des autres select
		var ids = res.split(";");	
		var selectInputId = ["rap","quartier","entite","elus"];
		
		for(i=0; i<selectInputId.length; i++){
			$options = $('#'+selectInputId[i]).find('option');	
			
			$options.each(function(){
				var idArray = ids[i].split(",");
				
				if( !$.inArray(this.value.toString(), idArray) > -1 ){
					$(this).hide();
				}
				else{
					$(this).show();
				}
			});
		}
	}
</script>
<body>
	<div class="container">
		<fieldset>
			<legend>test d'operation avec l'input select </legend>
			<div class="row-fluid">
				<div class="span6 offset2">
				<form id="testForm">
					<select id="arrondissement1" class="input-small" multiple="multiple" name="arrondissement1">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="18">18</option>
						<option value="19">19</option>
						<option value="20">20</option>
					</select>
					
					<select id="rap" class="input-small" multiple="multiple" name="rap">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>					
					<select id="quartier" class="input-small" multiple="multiple" name="quartier">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>					
					<select id="entite" class="input-small" multiple="multiple" name="entite">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>					
					<select id="elus" class="input-small" multiple="multiple" name="elus">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
						
					<button id="selectAll" type="button" >
						tout select
					</button>
				</form>
				</div>
			</div>
		</fieldset>
	</div>
</body>


<script>
	$(document).ready(function(){
		bindChangeSelectValue("arrondissement1");
	});
</script>
</html>